:where(.ag-input-field-input[type='number']:not(.ag-number-field-input-stepper)) {
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
    }
}

.ag-input-field-input:where(
        input:not([type]),
        input[type='text'],
        input[type='number'],
        input[type='tel'],
        input[type='date'],
        input[type='datetime-local'],
        textarea
    ) {
    border: var(--ag-input-border);
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    background-color: var(--ag-input-background-color);
    border-radius: var(--ag-input-border-radius);
    color: var(--ag-input-text-color);
    padding-left: var(--ag-input-padding-start);
    min-height: var(--ag-input-height);

    &:where(:disabled) {
        background-color: var(--ag-input-disabled-background-color);
        border: var(--ag-input-disabled-border);
        color: var(--ag-input-disabled-text-color);
    }

    &:where(:focus) {
        outline: none;
        box-shadow: var(--ag-input-focus-shadow);
        background-color: var(--ag-input-focus-background-color);
        border: var(--ag-input-focus-border);
        color: var(--ag-input-focus-text-color);
    }

    &:where(:invalid) {
        background-color: var(--ag-input-invalid-background-color);
        border: var(--ag-input-invalid-border);
        color: var(--ag-input-invalid-text-color);
    }

    &:where(.invalid) {
        background-color: var(--ag-input-invalid-background-color);
        border: var(--ag-input-invalid-border);
        color: var(--ag-input-invalid-text-color);
    }

    &::placeholder {
        color: var(--ag-input-placeholder-text-color);
    }
}

/* icon for search inputs */
:where(
        .ag-column-select-header-filter-wrapper,
        .ag-filter-toolpanel-search,
        .ag-mini-filter,
        .ag-filter-filter,
        .ag-filter-add-select,
        .ag-floating-filter-search-icon
    ) {
    .ag-input-wrapper::before {
        position: absolute;
        display: block;
        margin-left: var(--ag-spacing);
        width: 12px;
        height: 12px;
        color: var(--ag-input-icon-color);
        background-color: currentcolor;
        mask-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJNNS4zIDlhMy43IDMuNyAwIDEgMCAwLTcuNSAzLjcgMy43IDAgMCAwIDAgNy41Wk0xMC41IDEwLjUgOC4zIDguMiIvPjwvc3ZnPg==');
        mask-position: center;
        mask-repeat: no-repeat;
        opacity: 0.5;
        content: '';
    }

    .ag-text-field-input,
    .ag-number-field-input {
        padding-left: calc(var(--ag-spacing) * 1.5 + 12px);
    }
}
